<style>
    #activity {
        position: relative;
    }
    #activity .title {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    #activity .title img {
        width: 65%;
        margin: 0 auto;
    }
    #activity .card {
        display: flex;
        justify-content: center;
    }
    #activity .card img {
        border-radius: 10px;
        margin-right: 15px;
    }
    #activity .card img:last-child {
        margin-right: 0;
    }
</style>
<section id="activity">

</section>
<script>
    $(function () {
        axios.get('./static/api/activity.json').then(res => {
            renderActivity(res.data.data)
        })

        function renderActivity (data) {
            var res = `<div class="title"><img src="${data[0].src}" width="100%"></div>`
            delete data[0]
            res += `<div class="card bancen">`
            res += data.map(item => `<img src="${item.src}" width="32%"/>`).join('')
            res += `</div>`
            $('#activity').append(res)
        }
    })
</script>